<template>
  <div id="app">
    <cart-header></cart-header>

    <cart-item
      v-for="item in cardList"
      :key="item.id"
      :items="item"
      @commodity="putCartList"
    ></cart-item>

    <cart-footer :total="total" :totalPrices="totalPrices"></cart-footer>
  </div>
</template>

<script>
import CartHeader from "./components/cart-header.vue";
import CartItem from "./components/cart-item.vue";
import CartFooter from "./components/cart-footer.vue";
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  components: {
    CartHeader,
    CartItem,
    CartFooter,
  },
  created() {
    this.$store.dispatch("cart/getCartList");
  },
  methods: {
    ...mapMutations("cart", ["commodity"]),
    ...mapActions("cart", ["putCartList"]),
  },
  computed: {
    ...mapState("cart", ["cardList"]),
    ...mapGetters("cart", ["total", "totalPrices"]),
  },
};
</script>

<style >
#app {
  width: 100%;
  border: 3px solid #ccc;
  border-radius: 3px;
  padding: 50px 0;
}
</style>
